<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-body">
                  <hrinput v-if="showInput" ref="hrinput" :hrData='hrdata' :enable='true'/>
                  <div class="wizard">
                    <span class="wizard__arrow"></span>
                    <div class="wizard__body">
                      <!-- <el-button v-if='editable' type="success" plain class="pull-right">
                        <i class="fa fa-edit" @click="uploadMonthReport">上报</i>
                      </el-button> -->
                      <el-button v-if='!editable' type="success"  class="pull-right">
                        <i class="fa fa-edit" @click="editMonthReport">修改</i>
                      </el-button>
                      <el-button v-if='editable' type="primary" class="pull-right">
                        <i class="fa fa-save" @click="saveMonthReport">保存</i>
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import monthApi from "../../../common/monthapi";
import hrinput from './hrinput'
import Utils from "../../../common/utils";
let util = new Utils();
let api = new monthApi();
export default {
  name: "monthinput",
  components: {
    hrinput
  },
  created: function() {
    this.hrdata.belongTime = api.getThisMonth()
    this.hrdata.thismonth = api.getDefaultVal()
    this.hrdata.lastmonth = api.getDefaultVal()
    // this.thismonth.belongTime = mydate;
    debugger
    this.loaddata(this.hrdata.belongTime, true);
    this.loaddata(api.getLastMonth(this.hrdata.belongTime), false);
  },
  data: function() {
    return {
      hrdata: {},
      editable: true,
      showInput : false
    };
  },
  watch: {
    thismonth: {
      handler(curval, oldval) {
        //this.sumtotal(this,true)
        this.showDiff(curval);
        // this.sumtotal(this, true);
        console.log("val changed:" + curval);
      },
      deep: true
    }
  },
  methods: {
    uploadMonthReport(){
      
    },
    editMonthReport(){
      // this.editable = true
    },
    showDiff(val) {
      for (var name in val) {
        if (val[name] != this.lastmonth[name]) {
          if (
            this.$refs[name] &&
            this.$refs[name].$refs &&
            this.$refs[name].$refs.input  &&
            this.$refs[name].$refs.input.$refs &&
            this.$refs[name].$refs.input.$refs.input &&
            this.$refs[name].$refs.input.$refs.input.style
          ) {
            this.$refs[name].$refs.input.$refs.input.style["border-color"] = "red";
            this.$refs[name].$refs.input.$refs.input.style["color"] = "red";
          }
        }else{
          if (
            this.$refs[name] &&
            this.$refs[name].$refs &&
            this.$refs[name].$refs.input  &&
            this.$refs[name].$refs.input.$refs &&
            this.$refs[name].$refs.input.$refs.input &&
            this.$refs[name].$refs.input.$refs.input.style
          ) {
            this.$refs[name].$refs.input.$refs.input.style["border-color"] = "#e4e7ed";
            this.$refs[name].$refs.input.$refs.input.style["color"] = "#c0c4cc";
          }
        }
      }
    },
    sumtotal(owner, bThis) {
      // if (bThis) {
      //   var data = api.sum(owner.thismonth);
      //   owner.thismonthpositions = data.positions;
      //   owner.thismonthtotalChanges = data.totalChanges;
      //   owner.thismonthincreaseWorkers = data.increaseWorkers;
      //   owner.thismonthtotalEmployees = data.totalEmployees;
      //   owner.thismonthotherWorkers = data.otherWorkers;
      //   owner.thismonthtotaledus = data.totaledus;
      //   owner.thismonthdecreaseWorkers = data.decreaseWorkers;
      //   owner.thismonthtotalkeeps = data.totalkeeps;
      // } else {
      //   var data = api.sum(owner.lastmonth);
      //   owner.lastmonthpositions = data.positions;
      //   owner.lastmonthtotalChanges = data.totalChanges;
      //   owner.lastmonthincreaseWorkers = data.increaseWorkers;
      //   owner.lastmonthtotalEmployees = data.totalEmployees;
      //   owner.lastmonthotherWorkers = data.otherWorkers;
      //   owner.lastmonthtotaledus = data.totaledus;
      //   owner.lastmonthdecreaseWorkers = data.decreaseWorkers;
      //   owner.lastmonthtotalkeeps = data.totalkeeps;
      // }
    },
    loaddata(belongTime, beThis) {
      console.log("time:" + belongTime);
      var that = this;
      debugger
      api.get(belongTime,0, resp => {
        debugger
        if (resp.body.body.stats.length > 0 && resp.body.body.stats[0]) {
          if (beThis) {
            that.showInput = true
            that.hrdata.thismonth = resp.body.body.stats[0];
            that.hrdata.thismonth = api.sum(that.hrdata.thismonth)
            // that.sumtotal(that, true);
            // that.editable = false;
          } else {
            that.hrdata.lastmonth = resp.body.body.stats[0];
            that.hrdata.lastmonth = api.sum(that.hrdata.lastmonth)
            if (that.hrdata.lastmonth && that.editable) {
              util.deepCopy(that.hrdata.lastmonth, that.hrdata.thismonth);
              that.hrdata.thismonth.belongTime = that.hrdata.belongTime
            }
          }
        }
        // that.sumtotal(that, true);
        // that.sumtotal(that, false);
      });
    },
    saveMonthReport() {
      let that = this;
      let thismonth = this.$refs.hrinput.getData()
      thismonth.departmentId = this.$store.state.userDepart.departmentId
      api.add(
        thismonth,
        resp => {
          util.showSucInfo(that, "人事月报上报成功!");
          that.editable = false;
        },
        resp => {
          console.log("failed:" + resp.data);
          util.showErrorInfo(that, "网络异常,请重试!");
        }
      );
    }
  }
};
</script>

<style>
.table > thead:first-child > tr:first-child > th {
  border-top: 1px solid #352f2f;
}
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #352f2f;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #352f2f;
}
.row {
  padding: 10px 10px;
}
.control-label {
  padding-top: 10px;
}
.red {
  border-color: "red";
  color: "red";
}
</style>
